<html>
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <!-- import Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript" src="../js/dayjs.min.js"></script>
    </head>
    <body>
        <div id="root">
            <h2>显示格式化后的时间</h2>
            <!-- 计算属性实现 -->
            <h3>现在是： {{fmtTime}} </h3>
            <!-- methods实现 -->
            <h3>现在是： {{getFmtTime()}}</h3>
            <!-- 过滤器实现 -->
            <h3>现在是： {{ time | timeFormater}}</h3>
            <!-- 过滤器实现 (传参) -->
            <h3>现在是： {{ time | timeFormater('YYYY MM DD')}}</h3>
            <!-- 过滤器实现 (传递) -->
            <h3>现在是： {{ time | timeFormater | mySlice}}</h3>
            <!-- 过滤器使用场景 其他 -->
            <h3 :m="time | timeFormater">可以在v-bind上使用，不可以在v-model上使用</h3>
        </div>

        <div id="root2">
            <h2>{{msg | mySlice}}</h2>
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false // 阻止vue在启动时生成生产提示。

        // 全局过滤器
        Vue.filter('mySlice', function(value){
            return value.slice(0,4)
        })
        new Vue({
            el:'#root',
            data:{
                time: 1715178571773
            },
            computed:{
                fmtTime(){
                    return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
                }
            },
            methods:{
                getFmtTime(){
                    return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss")
                }
            },
            filters:{
                // 局部过滤器
                timeFormater(value, pattern="YYYY-MM-DD HH:mm:ss"){
                    return dayjs(value).format(pattern)
                },
                mySlice(value){
                    return value.slice(0,4)
                }
            }
        })

        new Vue({
            el:'#root2',
            data:{
                msg: 'abcde'
            },
        })
    </script>
</html>